package mask

import `$`
import kotlinx.html.*
import kotlinx.html.dom.*
import org.w3c.dom.HTMLDivElement
import kotlin.browser.document
import kotlinx.html.js.*
import kotlin.browser.window
import kotlinx.html.injector.*
import org.w3c.dom.HTMLParagraphElement
import kotlin.properties.Delegates

//https://github.com/Kotlin/kotlinx.html/tree/master/js 是客户端使用的版本
class Mask {
    class InjectId {
        init {
            println("InjectId init")
        }

        var myDiv: HTMLDivElement by Delegates.notNull()

        fun demo() {
            val elm = document.create.inject(this, listOf(
                    InjectRoot to InjectId::myDiv
            )).div {
                p {
                    +"dddd on ll"
                }
                button {
                    text("Click")
                    onClickFunction = {
                        window.alert("a")
                    }
                }
            }

            `$`("#injectid").append(elm)

            myDiv.onclick = { _ ->
                println("inject id click")
            }
            println(myDiv.outerHTML)
        }
    }

    fun mask() {
        val myDiv = document.create.div {
            p { +"text inside" }
        }
        document.getElementById("container")!!.appendChild(myDiv)

        println("mask")
        inject()

        InjectId().demo()
    }

    fun appendTab(containerDiv: HTMLDivElement) {
        containerDiv.append.div {
            p { +"tab" }
            div {
                p {
                    text("hello")
                    comment("demo")
                }

                onClickFunction = { _ ->
                    window.alert("Kotlin!")
                }
            }
        }
    }

    fun inject() {
        val bean = ExampleBean()
        //we can inject it by class name or by tag name
        val elm = document.create.inject(bean, listOf(
                InjectByClassName("my-class") to ExampleBean::myDiv,
                InjectByTagName("p") to ExampleBean::myP
        )).div {
            div("my-class") {
                p {
                    +"test"
                }
            }
        }

        document.body!!.appendChild(elm)
        bean.out()
    }

    class ExampleBean {
        var myDiv: HTMLDivElement by Delegates.notNull()
        var myP: HTMLParagraphElement by Delegates.notNull()

        fun out() {
            println(myDiv.outerHTML)
            println(myP.innerText)
        }
    }
}